<template>
  <div class="app-container">
    <el-tabs type="border-card">
      <el-tab-pane>
        <span slot="label"><i class="el-icon-date"/>转出信息</span>
        <generate-form ref="generateForm" :data="jsonData" :remote="remoteFuncs" :value="editData"/>
      </el-tab-pane>
      <el-tab-pane label="转入信息">
        <generate-form ref="generateForm" :data="jsonData1" :remote="remoteFuncs" :value="editData"/>
      </el-tab-pane>
    </el-tabs>
    <div class="generate-block">
      <el-button type="primary" @click="handleSubmit">提交</el-button>
      <el-button type="primary">重置</el-button>
    </div>
  </div>
</template>
<script>
import GenerateForm from '@/components/CreateForm/GenerateForm'
import '@/components/CreateForm/styles/FormCreate.css'
import { getCodeList } from '@/api/codelist'
import GenerateTable from '@/components/CreateTable/GenerateTable'
export default {
  name: 'CreateFromSetname',
  components: {
    GenerateForm,
    GenerateTable
  },
  data: function() {
    return {
      jsonData: { 'list': [{ 'type': 'grid', 'name': '栅格布局', 'icon': 'th', 'columns': [{ 'span': 10, 'list': [{ 'type': 'input', 'name': '账号', 'icon': 'regular/keyboard', 'options': { 'width': '100%', 'defaultValue': '', 'required': false, 'dataType': 'string', 'pattern': '', 'placeholder': '', 'remoteFunc': 'func_1539846102000_19291' }, 'key': '1539846102000_19291', 'model': 'input_1539846102000_19291', 'rules': [{ 'type': 'string', 'message': '单行文本格式不正确' }] }] }, { 'span': 10, 'list': [{ 'type': 'input', 'name': '账户名称', 'icon': 'regular/keyboard', 'options': { 'width': '100%', 'defaultValue': '', 'required': false, 'dataType': 'string', 'pattern': '', 'placeholder': '', 'remoteFunc': 'func_1539846103000_97682' }, 'key': '1539846103000_97682', 'model': 'input_1539846103000_97682', 'rules': [{ 'type': 'string', 'message': '单行文本格式不正确' }] }] }], 'options': { 'gutter': 0, 'justify': 'start', 'align': 'top', 'remoteFunc': 'func_1539845968000_67167' }, 'key': '1539845968000_67167', 'model': 'grid_1539845968000_67167', 'rules': [] }, { 'type': 'grid', 'name': '栅格布局', 'icon': 'th', 'columns': [{ 'span': 10, 'list': [{ 'type': 'select', 'name': '币种', 'icon': 'regular/caret-square-down', 'options': { 'defaultValue': '', 'multiple': false, 'disabled': false, 'clearable': false, 'placeholder': '', 'required': false, 'showLabel': false, 'width': '100%', 'options': [{ 'value': '下拉框1' }, { 'value': '下拉框2' }, { 'value': '下拉框3' }], 'remote': true, 'remoteOptions': [], 'props': { 'value': 'value', 'label': 'label' }, 'remoteFunc': 'bizhong' }, 'key': '1539846071000_52510', 'model': 'select_1539846071000_52510', 'rules': [] }] }, { 'span': 10, 'list': [{ 'type': 'input', 'name': '产品编号', 'icon': 'regular/keyboard', 'options': { 'width': '100%', 'defaultValue': '', 'required': false, 'dataType': 'string', 'pattern': '', 'placeholder': '', 'remoteFunc': 'func_1539846105000_14043' }, 'key': '1539846105000_14043', 'model': 'input_1539846105000_14043', 'rules': [{ 'type': 'string', 'message': '单行文本格式不正确' }] }] }], 'options': { 'gutter': 0, 'justify': 'start', 'align': 'top', 'remoteFunc': 'func_1539845970000_91523' }, 'key': '1539845970000_91523', 'model': 'grid_1539845970000_91523', 'rules': [] }, { 'type': 'grid', 'name': '栅格布局', 'icon': 'th', 'columns': [{ 'span': 10, 'list': [{ 'type': 'select', 'name': '凭证种类', 'icon': 'regular/caret-square-down', 'options': { 'defaultValue': '', 'multiple': false, 'disabled': false, 'clearable': false, 'placeholder': '', 'required': false, 'showLabel': false, 'width': '100%', 'options': [{ 'value': '下拉框1' }, { 'value': '下拉框2' }, { 'value': '下拉框3' }], 'remote': true, 'remoteOptions': [], 'props': { 'value': 'value', 'label': 'label' }, 'remoteFunc': 'pingzhengzhonglei' }, 'key': '1539846073000_87950', 'model': 'select_1539846073000_87950', 'rules': [] }] }, { 'span': 10, 'list': [{ 'type': 'input', 'name': '凭证批号', 'icon': 'regular/keyboard', 'options': { 'width': '100%', 'defaultValue': '', 'required': false, 'dataType': 'string', 'pattern': '', 'placeholder': '', 'remoteFunc': 'func_1539846107000_25129' }, 'key': '1539846107000_25129', 'model': 'input_1539846107000_25129', 'rules': [{ 'type': 'string', 'message': '单行文本格式不正确' }] }] }], 'options': { 'gutter': 0, 'justify': 'start', 'align': 'top', 'remoteFunc': 'func_1539845971000_897' }, 'key': '1539845971000_897', 'model': 'grid_1539845971000_897', 'rules': [] }, { 'type': 'grid', 'name': '栅格布局', 'icon': 'th', 'columns': [{ 'span': 10, 'list': [{ 'type': 'input', 'name': '凭证序号', 'icon': 'regular/keyboard', 'options': { 'width': '100%', 'defaultValue': '', 'required': false, 'dataType': 'string', 'pattern': '', 'placeholder': '', 'remoteFunc': 'func_1539846110000_43633' }, 'key': '1539846110000_43633', 'model': 'input_1539846110000_43633', 'rules': [{ 'type': 'string', 'message': '单行文本格式不正确' }] }] }, { 'span': 10, 'list': [{ 'type': 'input', 'name': '账户当前余额', 'icon': 'regular/keyboard', 'options': { 'width': '100%', 'defaultValue': '', 'required': false, 'dataType': 'string', 'pattern': '', 'placeholder': '', 'remoteFunc': 'func_1539846112000_98675' }, 'key': '1539846112000_98675', 'model': 'input_1539846112000_98675', 'rules': [{ 'type': 'string', 'message': '单行文本格式不正确' }] }] }], 'options': { 'gutter': 0, 'justify': 'start', 'align': 'top', 'remoteFunc': 'func_1539845983000_36382' }, 'key': '1539845983000_36382', 'model': 'grid_1539845983000_36382', 'rules': [] }, { 'type': 'grid', 'name': '栅格布局', 'icon': 'th', 'columns': [{ 'span': 10, 'list': [{ 'type': 'input', 'name': '交易金额', 'icon': 'regular/keyboard', 'options': { 'width': '100%', 'defaultValue': '', 'required': false, 'dataType': 'string', 'pattern': '', 'placeholder': '', 'remoteFunc': 'func_1539846115000_20218' }, 'key': '1539846115000_20218', 'model': 'input_1539846115000_20218', 'rules': [{ 'type': 'string', 'message': '单行文本格式不正确' }] }] }, { 'span': 10, 'list': [{ 'type': 'select', 'name': '支付条件', 'icon': 'regular/caret-square-down', 'options': { 'defaultValue': '', 'multiple': false, 'disabled': false, 'clearable': false, 'placeholder': '', 'required': false, 'showLabel': false, 'width': '100%', 'options': [{ 'value': '下拉框1' }, { 'value': '下拉框2' }, { 'value': '下拉框3' }], 'remote': true, 'remoteOptions': [], 'props': { 'value': 'value', 'label': 'label' }, 'remoteFunc': 'zhifutiaojian' }, 'key': '1539846084000_16612', 'model': 'select_1539846084000_16612', 'rules': [] }] }], 'options': { 'gutter': 0, 'justify': 'start', 'align': 'top', 'remoteFunc': 'func_1539845986000_41595' }, 'key': '1539845986000_41595', 'model': 'grid_1539845986000_41595', 'rules': [] }, { 'type': 'grid', 'name': '栅格布局', 'icon': 'th', 'columns': [{ 'span': 10, 'list': [{ 'type': 'input', 'name': '新凭证批号', 'icon': 'regular/keyboard', 'options': { 'width': '100%', 'defaultValue': '', 'required': false, 'dataType': 'string', 'pattern': '', 'placeholder': '', 'remoteFunc': 'func_1539846117000_56650' }, 'key': '1539846117000_56650', 'model': 'input_1539846117000_56650', 'rules': [{ 'type': 'string', 'message': '单行文本格式不正确' }] }] }, { 'span': 10, 'list': [{ 'type': 'select', 'name': '新凭证种类', 'icon': 'regular/caret-square-down', 'options': { 'defaultValue': '', 'multiple': false, 'disabled': false, 'clearable': false, 'placeholder': '', 'required': false, 'showLabel': false, 'width': '100%', 'options': [{ 'value': '下拉框1' }, { 'value': '下拉框2' }, { 'value': '下拉框3' }], 'remote': true, 'remoteOptions': [], 'props': { 'value': 'value', 'label': 'label' }, 'remoteFunc': 'xinpingzhengzhonglei' }, 'key': '1539846087000_98424', 'model': 'select_1539846087000_98424', 'rules': [] }] }], 'options': { 'gutter': 0, 'justify': 'start', 'align': 'top', 'remoteFunc': 'func_1539845989000_63617' }, 'key': '1539845989000_63617', 'model': 'grid_1539845989000_63617', 'rules': [] }, { 'type': 'grid', 'name': '栅格布局', 'icon': 'th', 'columns': [{ 'span': 10, 'list': [{ 'type': 'input', 'name': '新凭证序号', 'icon': 'regular/keyboard', 'options': { 'width': '100%', 'defaultValue': '', 'required': false, 'dataType': 'string', 'pattern': '', 'placeholder': '', 'remoteFunc': 'func_1539846119000_22870' }, 'key': '1539846119000_22870', 'model': 'input_1539846119000_22870', 'rules': [{ 'type': 'string', 'message': '单行文本格式不正确' }] }] }, { 'span': 10, 'list': [] }], 'options': { 'gutter': 0, 'justify': 'start', 'align': 'top', 'remoteFunc': 'func_1539845991000_35987' }, 'key': '1539845991000_35987', 'model': 'grid_1539845991000_35987', 'rules': [] }], 'config': { 'labelWidth': 100, 'labelPosition': 'right' }},
      jsonData1: { 'list': [{ 'type': 'grid', 'name': '栅格布局', 'icon': 'th', 'columns': [{ 'span': 10, 'list': [{ 'type': 'input', 'name': '收款账号', 'icon': 'regular/keyboard', 'options': { 'width': '100%', 'defaultValue': '', 'required': false, 'dataType': 'string', 'pattern': '', 'placeholder': '', 'remoteFunc': 'func_1539846325000_31563' }, 'key': '1539846325000_31563', 'model': 'input_1539846325000_31563', 'rules': [{ 'type': 'string', 'message': '单行文本格式不正确' }] }] }, { 'span': 10, 'list': [{ 'type': 'input', 'name': '收款账户名称', 'icon': 'regular/keyboard', 'options': { 'width': '100%', 'defaultValue': '', 'required': false, 'dataType': 'string', 'pattern': '', 'placeholder': '', 'remoteFunc': 'func_1539846326000_92590' }, 'key': '1539846326000_92590', 'model': 'input_1539846326000_92590', 'rules': [{ 'type': 'string', 'message': '单行文本格式不正确' }] }] }], 'options': { 'gutter': 0, 'justify': 'start', 'align': 'top', 'remoteFunc': 'func_1539846313000_20852' }, 'key': '1539846313000_20852', 'model': 'grid_1539846313000_20852', 'rules': [] }, { 'type': 'grid', 'name': '栅格布局', 'icon': 'th', 'columns': [{ 'span': 10, 'list': [{ 'type': 'input', 'name': '摘要说明', 'icon': 'regular/keyboard', 'options': { 'width': '100%', 'defaultValue': '', 'required': false, 'dataType': 'string', 'pattern': '', 'placeholder': '', 'remoteFunc': 'func_1539846330000_74695' }, 'key': '1539846330000_74695', 'model': 'input_1539846330000_74695', 'rules': [{ 'type': 'string', 'message': '单行文本格式不正确' }] }] }, { 'span': 10, 'list': [{ 'type': 'input', 'name': '摘要代码', 'icon': 'regular/keyboard', 'options': { 'width': '100%', 'defaultValue': '', 'required': false, 'dataType': 'string', 'pattern': '', 'placeholder': '', 'remoteFunc': 'func_1539846332000_75568' }, 'key': '1539846332000_75568', 'model': 'input_1539846332000_75568', 'rules': [{ 'type': 'string', 'message': '单行文本格式不正确' }] }] }], 'options': { 'gutter': 0, 'justify': 'start', 'align': 'top', 'remoteFunc': 'func_1539846315000_14436' }, 'key': '1539846315000_14436', 'model': 'grid_1539846315000_14436', 'rules': [] }, { 'type': 'grid', 'name': '栅格布局', 'icon': 'th', 'columns': [{ 'span': 10, 'list': [{ 'type': 'select', 'name': '交易行', 'icon': 'regular/caret-square-down', 'options': { 'defaultValue': '', 'multiple': false, 'disabled': false, 'clearable': false, 'placeholder': '', 'required': false, 'showLabel': false, 'width': '100%', 'options': [{ 'value': '下拉框1' }, { 'value': '下拉框2' }, { 'value': '下拉框3' }], 'remote': true, 'remoteOptions': [], 'props': { 'value': 'value', 'label': 'label' }, 'remoteFunc': 'jiaoyihang' }, 'key': '1539846336000_99667', 'model': 'select_1539846336000_99667', 'rules': [] }] }, { 'span': 10, 'list': [{ 'type': 'select', 'name': '银行类别', 'icon': 'regular/caret-square-down', 'options': { 'defaultValue': '', 'multiple': false, 'disabled': false, 'clearable': false, 'placeholder': '', 'required': false, 'showLabel': false, 'width': '100%', 'options': [{ 'value': '下拉框1' }, { 'value': '下拉框2' }, { 'value': '下拉框3' }], 'remote': true, 'remoteOptions': [], 'props': { 'value': 'value', 'label': 'label' }, 'remoteFunc': 'yinhangleibie' }, 'key': '1539846338000_83415', 'model': 'select_1539846338000_83415', 'rules': [] }] }], 'options': { 'gutter': 0, 'justify': 'start', 'align': 'top', 'remoteFunc': 'func_1539846316000_64848' }, 'key': '1539846316000_64848', 'model': 'grid_1539846316000_64848', 'rules': [] }, { 'type': 'grid', 'name': '栅格布局', 'icon': 'th', 'columns': [{ 'span': 10, 'list': [{ 'type': 'select', 'name': '账户类型', 'icon': 'regular/caret-square-down', 'options': { 'defaultValue': '', 'multiple': false, 'disabled': false, 'clearable': false, 'placeholder': '', 'required': false, 'showLabel': false, 'width': '100%', 'options': [{ 'value': '下拉框1' }, { 'value': '下拉框2' }, { 'value': '下拉框3' }], 'remote': true, 'remoteOptions': [], 'props': { 'value': 'value', 'label': 'label' }, 'remoteFunc': 'zhanghuleixing' }, 'key': '1539846341000_49963', 'model': 'select_1539846341000_49963', 'rules': [] }] }, { 'span': 10, 'list': [] }], 'options': { 'gutter': 0, 'justify': 'start', 'align': 'top', 'remoteFunc': 'func_1539846318000_70434' }, 'key': '1539846318000_70434', 'model': 'grid_1539846318000_70434', 'rules': [] }], 'config': { 'labelWidth': 100, 'labelPosition': 'right' }},
      editData: {},
      values: {},
      remoteFuncs: {
        jiaoyihang(resolve) {
          // 交易行 select_1539846336000_99667
          // 获取到远端数据后执行回调函数
          // resolve(data)
          getCodeList('交易行').then(response => { resolve(response.data) })
        },

        yinhangleibie(resolve) {
          // 银行类别 select_1539846338000_83415
          // 获取到远端数据后执行回调函数
          // resolve(data)
          getCodeList('银行类别').then(response => { resolve(response.data) })
        },

        zhanghuleixing(resolve) {
          // 账户类型 select_1539846341000_49963
          // 获取到远端数据后执行回调函数
          // resolve(data)
          getCodeList('账户类型').then(response => { resolve(response.data) })
        },
        bizhong(resolve) {
          // 币种 select_1539846071000_52510
          // 获取到远端数据后执行回调函数
          // resolve(data)
          getCodeList('币种').then(response => { resolve(response.data) })
        },

        pingzhengzhonglei(resolve) {
          // 凭证种类 select_1539846073000_87950
          // 获取到远端数据后执行回调函数
          // resolve(data)
          getCodeList('凭证种类').then(response => { resolve(response.data) })
        },

        zhifutiaojian(resolve) {
          // 支付条件 select_1539846084000_16612
          // 获取到远端数据后执行回调函数
          // resolve(data)
          getCodeList('支付条件').then(response => { resolve(response.data) })
        },

        xinpingzhengzhonglei(resolve) {
          // 新凭证种类 select_1539846087000_98424
          // 获取到远端数据后执行回调函数
          // resolve(data)
          getCodeList('新凭证种类').then(response => { resolve(response.data) })
        }
      }
    }
  },
  methods: {
    handleSubmit() {
      this.$refs.generateForm.getData().then(data => {
        // 数据校验成功
        // data 为获取的表单数据
      }).catch(e => {
        // 数据校验失败
      })
    },
    handleChange(val) {
      console.log(val)
    }

  }
}
</script>
